Как пофиксить ошибку Angular input has no initializer?

Ошибка "Angular input has no initializer" возникает, когда в Angular компоненте есть входное свойство (input property), но оно не имеет начального значения (initializer). В этом ответе я покажу, как исправить эту ошибку.

Шаг 1: Понимание ошибки

  • Входные свойства (input properties) в Angular используются для передачи данных в компонент из родительского компонента. Когда вы определяете входное свойство без начального значения, Angular не знает, какое значение использовать по умолчанию. Это приводит к ошибке "Angular input has no initializer".

Шаг 2: Добавление начального значения

  • Чтобы исправить эту ошибку, вы должны добавить начальное значение для входного свойства. Вы можете сделать это в объявлении свойства или в конструкторе компонента.
import { Component, Input } from '@angular/core'

@Component({
	selector: 'app-example',
	template: '...'
})
export class ExampleComponent {
	@Input() inputValue: string = '' // Добавление начального значения

	constructor() {
		// Или добавление начального значения в конструкторе
		this.inputValue = ''
	}
}

Шаг 3: Использование начального значения

  • Теперь, когда у вас есть начальное значение для входного свойства, вы можете использовать его в компоненте по умолчанию.
import { Component, Input } from '@angular/core'

@Component({
	selector: 'app-example',
	template: ` <div>{{ inputValue }}</div> `
})
export class ExampleComponent {
	@Input() inputValue: string = 'Default Value' // Пример начального значения
}

В этом примере, если родительский компонент не передает значение во входное свойство inputValue, будет использоваться значение "Default Value".

Добавление начального значения для входного свойства позволяет избежать ошибки "Angular input has no initializer" и обеспечивает корректное функционирование компонента.